<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="../../../vue.js"></script>
</head>
<body>
<div id="box">
<!--    参数-->
<!--    指令 v-bind 可以在后面带一个参数，用冒号（:）隔开，src 即为参数。此时 img 标签中的 src 会与 vm 实例中的 avatar 绑定，等同于 :-->
    <img v-bind:src="hao" alt="">
<!--修饰符-->
<!--    修饰符（Modifiers）是以半角句号 . 开始的特殊后缀，用于表示指令应该以特殊方式绑定。-->
    <button v-on:click.stop="doClick"></button>

</div>
<script>
    var data = {
            hao:'./1-10 tp/1.jpg'
        }
    var vm = new Vue({
        el:'#box',
        data:data,
    })
    var index = 1;
    var max = 4;
    setInterval(function () {
        // console.log(1);
        data.hao = './1-10 tp/'+index+'.jpg';
        if (index==max){
            index=1
        }else{
            index+=1;
        }

    },1000)
</script>
</body>
</html>